<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Han's Blog - 我思故我在</title><meta name="author" content="憨憨一个"><meta name="copyright" content="憨憨一个"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="description" content="憨憨的博客，应该会有知识点记录，也会有日常">
<meta property="og:type" content="website">
<meta property="og:title" content="Han&#39;s Blog">
<meta property="og:url" content="http://blog.better2020.top/index.html">
<meta property="og:site_name" content="Han&#39;s Blog">
<meta property="og:description" content="憨憨的博客，应该会有知识点记录，也会有日常">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://blog.better2020.top/null">
<meta property="article:author" content="憨憨一个">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://blog.better2020.top/null"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://blog.better2020.top/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="preconnect" href="//zz.bdstatic.com"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><script>var GLOBAL_CONFIG = { 
  root: '/',
  hexoversion: '5.2.0',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  ClickShowText: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  justifiedGallery: {
    js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
    css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
};

var saveToLocal = {
  set: function setWithExpiry(key, value, ttl) {
    const now = new Date()
    const expiryDay = ttl * 86400000
    const item = {
      value: value,
      expiry: now.getTime() + expiryDay,
    }
    localStorage.setItem(key, JSON.stringify(item))
  },

  get: function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key)

    if (!itemStr) {
      return undefined
    }
    const item = JSON.parse(itemStr)
    const now = new Date()

    if (now.getTime() > item.expiry) {
      localStorage.removeItem(key)
      return undefined
    }
    return item.value
  }
}</script><script id="config_change">var GLOBAL_CONFIG_SITE = { 
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isSidebar: false,
  postUpdate: '2022-03-17 13:26:44'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(function () {
  window.activateDarkMode = function () {
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
    }
  }
  window.activateLightMode = function () {
    document.documentElement.setAttribute('data-theme', 'light')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
    }
  }

  const autoChangeMode = 'false'
  const t = saveToLocal.get('theme')
  if (autoChangeMode === '1') {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
    const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
    const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

    if (t === undefined) {
      if (isLightMode) activateLightMode()
      else if (isDarkMode) activateDarkMode()
      else if (isNotSpecified || hasNoSupport) {
        const now = new Date()
        const hour = now.getHours()
        const isNight = hour <= 6 || hour >= 18
        isNight ? activateDarkMode() : activateLightMode()
      }
      window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
        if (saveToLocal.get('theme') === undefined) {
          e.matches ? activateDarkMode() : activateLightMode()
        }
      })
    } else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else if (autoChangeMode === '2') {
    const now = new Date()
    const hour = now.getHours()
    const isNight = hour <= 6 || hour >= 18
    if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
    else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else {
    if (t === 'dark') activateDarkMode()
    else if (t === 'light') activateLightMode()
  }
})()</script><meta name="generator" content="Hexo 5.2.0"><link rel="alternate" href="/atom.xml" title="Han's Blog" type="application/atom+xml">
</head><body><div id="mobile-sidebar"><div id="menu_mask"></div><div id="mobile-sidebar-menus"><div class="mobile_author_icon"><img class="avatar-img" src="/null" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="mobile_post_data"><div class="mobile_data_item is-center"><div class="mobile_data_link"><a href="/archives/"><div class="headline">文章</div><div class="length_num">25</div></a></div></div><div class="mobile_data_item is-center">      <div class="mobile_data_link"><a href="/tags/"><div class="headline">标签</div><div class="length_num">16</div></a></div></div><div class="mobile_data_item is-center">     <div class="mobile_data_link"><a href="/categories/"><div class="headline">分类</div><div class="length_num">2</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div id="body-wrap"><header class="full_page" id="page-header" style="background-image: url(https://w.wallhaven.cc/full/ox/wallhaven-oxkjgm.jpg)"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Han's Blog</a></span><span id="menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><span class="close" id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="site-info"><h1 id="site-title">Han's Blog</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/liujiaoy" target="_blank" title="Github"><i class="fab fa-github"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout_page" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/" title="http那点事">     <img class="post_bg" src="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="http那点事"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/" title="http那点事">http那点事</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-03-01T05:21:10.000Z" title="发表于 2022-03-01 13:21:10">2022-03-01</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">HTTP相关面试题一个页面从输入URL到页面显示加载完成，这个过程都发生了什么应该是当之无愧的高频问题吧,参考文章

DNS解析
建立TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析页面
连接结束

1.DNS解析涉及知识点实现域名到IP地址的转换例子：查询www.google.com的IP地址查询过程 .=&gt; .com =&gt; google.com =&gt; www.google.com
DNS优化

DNS缓存DNS缓存（浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存）
DNS负载均衡（DNS重定向）选择合适的服务器返回给用户

2.TCP连接HTTPS协议（HTTP+SSL/TLS）HTTP报文是包裹在TCP报文中发送的，服务端收到TCP报文时会提取出HTTP报文，但因为HTTP报文是明文的，存在安全隐患，所以产生了HTTPS即在HTTP报文包裹进TCP报文中之前使用SSL/TLS进行加密，层级上位于HTTP协议和TCP之间
HTTPS过程HTTPS在传输数据之前需要客户端和服务器进行一个握手（TLS ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/" title="BFC到底是什么">     <img class="post_bg" src="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="BFC到底是什么"></a></div><div class="recent-post-info"><a class="article-title" href="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/" title="BFC到底是什么">BFC到底是什么</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2022-02-25T08:59:37.000Z" title="发表于 2022-02-25 16:59:37">2022-02-25</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">关于BFC这个问题可以穿插到清除浮动时问。对于BFC，感觉是知其然而不知其所以然，只了解基本概念，比如全称是Block Formatting Context（块格式化上下文），可以清除浮动。却没有详细去了解，今天查看了一下才有一种恍然大悟的感觉
参考博客地址MDN文档地址
BFC的特性1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）2、计算BFC高度时浮动元素也参于计算（重点）3、BFC的区域不会与浮动容器发生重叠（重点）4、BFC内的容器在垂直方向依次排列5、元素的margin-left与其包含块的border-left相接触6、BFC是独立容器，容器内部元素不会影响容器外部元素
BFC解决了什么问题块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
1.margin边距重叠将他们置于不同的BFC可以解决这个问题
2.Float脱离文档流高度塌陷 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/" title="vue/vuecli4搭建新项目，并引入element">     <img class="post_bg" src="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/topimg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue/vuecli4搭建新项目，并引入element"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/" title="vue/vuecli4搭建新项目，并引入element">vue/vuecli4搭建新项目，并引入element</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-10-09T05:13:05.000Z" title="发表于 2021-10-09 13:13:05">2021-10-09</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">一、vue create my-projectname1vue create my-projectname

这边可以直接选择默认的配置，我选择了最后一个自己配置sass，babel，route，vuex，eslint

二、添加elementelement 官网(https://element.eleme.cn/#/zh-CN/component/quickstart)
这里值得注意！！vue@cli4直接一行命令搞定按需引入

vue add element

这样项目文件中多了如图所示的plugin文件夹，里面的element.js中用于添加你需要引入的element模块。main.js已经自行引入了此文件，接下来只需要使用即可
碎碎念之前根据element文档后面的按需引入来进行操作，发现找不到 babelrc文件，原来现在变成了babel.config.js,而且只需要一行命令就完美配置，真的牛
</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/" title="面试日记">     <img class="post_bg" src="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试日记"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/" title="面试日记">面试日记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-09-03T11:07:19.000Z" title="发表于 2021-09-03 19:07:19">2021-09-03</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/DailyRecord/">DailyRecord</a></span></div><div class="content">前言算是一篇面试日记，距离上次面试已经有接近一个月了吧，想着这一个月学习了很多，自我感觉也还挺良好的，于是就信心满满的去面试了。总体结果还好，相比于上次，这次没那么紧张了，就有会的问题也回答不上来，还是缺少锻炼的缘故。其他的原因也有，很多东西只是会但平时工作中用到的少，所以会想不起来。
面试问的问题垂直居中 不定高1.css3 translateY -50这个说到了2.flex justify-content;align-item;面试的时候死活想不起来justify-content,现在写的时候还挺顺手3.js这个说到了
合并数组再排序去重给一个数组[1,5,6],[1,8,5,4]怎么得到 [1,4,5,6,8]
这个问题没做好我想的是先把数组合并，再排序，最后去重,代码如下
123var a = [1,3,4],b=[2,5,4,6];var c= a.concat(b).sort();Array.prototype.call(new Set(c))
刚刚试了一下跑不通，对于把set转为数组我没有敲代码验证过，只模糊记得可以用 … 和 prototype,查阅了一下相关资料，以下 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" title="vue生命周期">     <img class="post_bg" src="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/lifecycle.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue生命周期"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" title="vue生命周期">vue生命周期</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-09-02T08:36:21.000Z" title="发表于 2021-09-02 16:36:21">2021-09-02</time></span></div><div class="content">前言首先，这是一道被问频率很高的面试题，其次，他的使用频率也很高，不了解清楚容易踩坑。
生命周期图示vue官网的图,配合下面的解释食用风味更佳


生命周期钩子及使用场景BeforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
使用场景此时连数据都没有，只能放些无关痛痒的操作，比如loadding
Created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
使用场景data里面的数据有了，一般可以进行ajax请求了，但如果要用到页面dom的请求就还不能用
BeforeMount在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
使用场景很少，或许可以修改render?
Mounted实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/08/31/%E4%BD%BF%E7%94%A8markdown%E5%86%99%E7%AE%80%E5%8E%86%E5%B9%B6%E8%BD%AC%E6%88%90pdf/" title="markdown写简历并转成pdf">     <img class="post_bg" src="/2021/08/31/%E4%BD%BF%E7%94%A8markdown%E5%86%99%E7%AE%80%E5%8E%86%E5%B9%B6%E8%BD%AC%E6%88%90pdf/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="markdown写简历并转成pdf"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/31/%E4%BD%BF%E7%94%A8markdown%E5%86%99%E7%AE%80%E5%8E%86%E5%B9%B6%E8%BD%AC%E6%88%90pdf/" title="markdown写简历并转成pdf">markdown写简历并转成pdf</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-31T06:13:16.000Z" title="发表于 2021-08-31 14:13:16">2021-08-31</time></span></div><div class="content">背景本来想写个个人简历网站，但是没有好的想法，做出来也就是写见不得人的烂尾工程，还是简单点好，最后选择使用md简历
markdown写简历这个markdown基础语法在之前的博客里面有讲到，今天就略过了。主要内容也就是个人信息，工作经历，项目经验
md文档转pdf转换插件Markdown PDF我用的是VSCode编辑器 插件 Markdown PDF

使用方式Fn1 调出vscode命令窗口，输入markdown即可出现相关命令，可以转成pdf或者其他类型
</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/08/27/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8BJS/" title="面试题之JS">     <img class="post_bg" src="/2021/08/27/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8BJS/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试题之JS"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/27/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8BJS/" title="面试题之JS">面试题之JS</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-27T06:19:17.000Z" title="发表于 2021-08-27 14:19:17">2021-08-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">js数据类型7 大数据类型

Number (数字)
String (字符串)
Boolean (布尔)
Symbol (符号)
Object (对象)
function (函数)
Array (数组)
Date (日期)
RegExp (正则表达式)


Null (空)
Undefined (未定义)

五种基本数据类型 Number,Null,Undefined,Boolean,String一种复杂数据类型 Objectes6 新加入 symbol
null与undefined
undefined 已声明，未定义
null 空值

判断数据类型的方法一、typeof
优点：能够快速区分基本数据类型 
缺点：不能将Object、Array和Null区分，都返回object
注意！ typeof(null)//object 但typeof 可以检测function

二、instanceof可进一步区分object为对象还是数组还是函数

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象 
缺点：Number，Boolean，String基本数 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/08/27/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8BCSS/" title="面试题之CSS">     <img class="post_bg" src="/2021/08/27/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8BCSS/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试题之CSS"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/27/%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8BCSS/" title="面试题之CSS">面试题之CSS</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-27T06:09:11.000Z" title="发表于 2021-08-27 14:09:11">2021-08-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">说明之前的那篇面试题有点长了，把css和js分出来吧
垂直居中高频问题基本所有前端开发者都会遇到，日常常见问题，算一个基础问题，然后还能引申到flex布局上，面试上也很好切换问题方向实现方式分几种
1. 基于定位12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;  &lt;meta charset=&quot;UTF-8&quot;&gt;  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;  &lt;tit ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/08/27/flex%E5%B8%83%E5%B1%80/" title="flex布局">     <img class="post_bg" src="/2021/08/27/flex%E5%B8%83%E5%B1%80/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="flex布局"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/27/flex%E5%B8%83%E5%B1%80/" title="flex布局">flex布局</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-27T05:27:55.000Z" title="发表于 2021-08-27 13:27:55">2021-08-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">Flex 父容器属性flex-direction 方向value：

row(default)
排列方式从右到左


column
排列方式从上到下


row-reverse
排列方式从左到右


column-reverse
排列方式从下到上



flex-wrap  换行value：

nowrap(default)
不换行


wrap
换行


wrap-reverse
相反的顺序换行


initial
设置该属性为它的默认值


inherit
从父元素继承



justify-content  主轴上的对齐方式value:

flex-start(default)
行首起始位置排列（主轴为row时左对齐）


flex-end
行尾排列（主轴为row时右对齐）


center 
居中


space-between（|div     1     div|）
分散对齐，左右顶格分散对齐


space-around
分散对齐，子容器左右间隔一致（|1div  2  div1|）


space-evenly
分散对齐，均匀分布，容器之间间隔一致（|1 div 1 d ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/08/26/hexo-%E5%8D%9A%E5%AE%A2%E7%99%BE%E5%BA%A6%E6%94%B6%E7%AF%87%E5%BD%95/" title="hexo 我的博客怎样才能在百度搜索到">     <img class="post_bg" src="/2021/08/26/hexo-%E5%8D%9A%E5%AE%A2%E7%99%BE%E5%BA%A6%E6%94%B6%E7%AF%87%E5%BD%95/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="hexo 我的博客怎样才能在百度搜索到"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/08/26/hexo-%E5%8D%9A%E5%AE%A2%E7%99%BE%E5%BA%A6%E6%94%B6%E7%AF%87%E5%BD%95/" title="hexo 我的博客怎样才能在百度搜索到">hexo 我的博客怎样才能在百度搜索到</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-08-26T05:54:44.000Z" title="发表于 2021-08-26 13:54:44">2021-08-26</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/code/">code</a></span></div><div class="content">第2天，我的网站还是没被收录第5天，我的网站还是没被收录，开始怀疑自己了


今天看到博客的阅读量好像只有自己点击的数量，以前以为是标题取得不好，写的也不怎么样所有没有点击量，今天自己到百度精准搜索了自己的博客标题，发现也还是搜不到，我百度了一下，原来还得提交自己的网站给百度收录….
参考博客以下内容参考这篇博客，写的很详细，全部跟下来没什么问题，不过还得等几天才能知道是不是成功了，因为提交到收录需要较一段时间。
补充说明补充几张细节吧，可能是因为与参考博客存在时间差了，有些地方不大一样了，半猜半蒙感觉都对了，记录一下，希望也能帮到别人。
CNAME验证原博未贴出步骤
1.选择CNAME验证2.到自己购买的域名下添加相应域名解析
链接提交的位置原博客，链接提交
我的，资源提交-普通收录
deploy 位置原博详细位置配置
</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" src="/null" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">憨憨一个</div><div class="author-info__description">憨憨的博客，应该会有知识点记录，也会有日常</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length_num">25</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length_num">16</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length_num">2</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/liujiaoy"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liujiaoy" target="_blank" title="Github"><i class="fab fa-github"></i></a></div></div></div><div class="sticky_layout"><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/" title="http那点事"><img src="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="http那点事"/></a><div class="content"><a class="title" href="/2022/03/01/http%E9%82%A3%E7%82%B9%E4%BA%8B/" title="http那点事">http那点事</a><time datetime="2022-03-01T05:21:10.000Z" title="发表于 2022-03-01 13:21:10">2022-03-01</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/" title="BFC到底是什么"><img src="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="BFC到底是什么"/></a><div class="content"><a class="title" href="/2022/02/25/BFC%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/" title="BFC到底是什么">BFC到底是什么</a><time datetime="2022-02-25T08:59:37.000Z" title="发表于 2022-02-25 16:59:37">2022-02-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/" title="vue/vuecli4搭建新项目，并引入element"><img src="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/topimg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue/vuecli4搭建新项目，并引入element"/></a><div class="content"><a class="title" href="/2021/10/09/vue-vuecli4%E6%90%AD%E5%BB%BA%E6%96%B0%E9%A1%B9%E7%9B%AE%EF%BC%8C%E5%B9%B6%E5%BC%95%E5%85%A5element/" title="vue/vuecli4搭建新项目，并引入element">vue/vuecli4搭建新项目，并引入element</a><time datetime="2021-10-09T05:13:05.000Z" title="发表于 2021-10-09 13:13:05">2021-10-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/" title="面试日记"><img src="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/top_img.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="面试日记"/></a><div class="content"><a class="title" href="/2021/09/03/%E9%9D%A2%E8%AF%95%E6%97%A5%E8%AE%B0/" title="面试日记">面试日记</a><time datetime="2021-09-03T11:07:19.000Z" title="发表于 2021-09-03 19:07:19">2021-09-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" title="vue生命周期"><img src="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/lifecycle.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vue生命周期"/></a><div class="content"><a class="title" href="/2021/09/02/vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" title="vue生命周期">vue生命周期</a><time datetime="2021-09-02T08:36:21.000Z" title="发表于 2021-09-02 16:36:21">2021-09-02</time></div></div></div></div></div><div class="card-widget card-categories"><div class="card-content"><div class="item-headline"><i class="fas fa-folder-open"></i><span>分类</span></div><ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/DailyRecord/"><span class="card-category-list-name">DailyRecord</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/code/"><span class="card-category-list-name">code</span><span class="card-category-list-count">19</span></a></li>
            
            </ul></div></div><div class="card-widget card-tags"><div class="card-content"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/CSS/" style="font-size: 1.23em; color: #999ea6">CSS</a> <a href="/tags/Git/" style="font-size: 1.37em; color: #99a4b2">Git</a> <a href="/tags/HTML/" style="font-size: 1.1em; color: #999">HTML</a> <a href="/tags/Hexo/" style="font-size: 1.23em; color: #999ea6">Hexo</a> <a href="/tags/JS/" style="font-size: 1.1em; color: #999">JS</a> <a href="/tags/MarkDown/" style="font-size: 1.1em; color: #999">MarkDown</a> <a href="/tags/VSCode/" style="font-size: 1.1em; color: #999">VSCode</a> <a href="/tags/element/" style="font-size: 1.1em; color: #999">element</a> <a href="/tags/hexo/" style="font-size: 1.1em; color: #999">hexo</a> <a href="/tags/http%E7%9B%B8%E5%85%B3/" style="font-size: 1.1em; color: #999">http相关</a> <a href="/tags/vue/" style="font-size: 1.5em; color: #99a9bf">vue</a> <a href="/tags/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/" style="font-size: 1.23em; color: #999ea6">个人简历</a> <a href="/tags/%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8/" style="font-size: 1.1em; color: #999">插件使用</a> <a href="/tags/%E6%97%A5%E5%B8%B8/" style="font-size: 1.1em; color: #999">日常</a> <a href="/tags/%E7%9F%A5%E8%AF%86%E7%82%B9/" style="font-size: 1.23em; color: #999ea6">知识点</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 1.1em; color: #999">面试</a></div></div></div><div class="card-widget card-archives"><div class="card-content"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/03/"><span class="card-archive-list-date">三月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/02/"><span class="card-archive-list-date">二月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/10/"><span class="card-archive-list-date">十月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">9</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/05/"><span class="card-archive-list-date">五月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/03/"><span class="card-archive-list-date">三月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item more is-center"><a class="card-archive-list-link-more" href="/archives/">
              <span>查看更多</span><i class="fas fa-angle-right"  ></i></a></li></ul></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By 憨憨一个</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><section id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></section><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div><div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "done is better than perfect,我思 故我在".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = 'done is better than perfect'
  }
}

if (true) {
  if (typeof Typed === 'function') subtitleType()
  else $.getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js', subtitleType)
} else {
  subtitleType()
}</script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script>(function(){
  const bp = document.createElement('script');
  const curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https'){
  bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
  bp.dataset.pjax = ''
  const s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(bp, s);
})()</script></div></body></html>